import React, { useState } from 'react';
import {
  Box,
  Confirmation,
  Container,
  DropdownMenu,
  Grid,
  GridItem,
  Icon,
  IconButton,
  MainColorType,
  Text,
} from '@nova-hf/ui';
import { formatDate, formatPrice, getMonth, getMonths } from 'beta/utils/helpers';
import { useTranslation } from 'beta/utils/i18n';
import { endOfMonth, startOfMonth } from 'date-fns';
import { capitalize, uniq } from 'lodash';
import { usePeriodicDataQuery } from 'typings/graphql';

import { ReportList } from './components/report-list/ReportList';

type ReportProps = {
  color?: MainColorType;
  date?: string;
  serviceId?: string;
};

type DropdownArray = {
  text: string;
  onClick: (value: string) => void;
}[];

const Report = ({ color, serviceId, date }: ReportProps) => {
  const { t } = useTranslation('subscription');
  const [buttonText, setButtonText] = useState('Velja mánuð');
  const [hiddenDays, setHiddenDays] = useState<Date[]>([]);
  const dateTime = () => {
    return date ? new Date(date) : new Date();
  };
  const dateFrom = startOfMonth(dateTime());
  const dateTo = endOfMonth(dateTime());
  const { data, loading, error, refetch } = usePeriodicDataQuery({
    variables: {
      input: {
        id: serviceId ?? '',
        from: dateFrom,
        until: dateTo,
      },
    },
  });

  const onSelectMonth = (dateTime: Date) => {
    refetch({
      input: { id: serviceId ?? '', from: dateTime },
    });
    setButtonText(capitalize(formatDate(dateTime, 'MMMM')));
  };

  const onArrowClick = (from: Date) => {
    if (hiddenDays.includes(from)) {
      setHiddenDays(hiddenDays.filter((date) => date !== from));
    } else {
      setHiddenDays([...hiddenDays, from]);
    }
  };

  const months = () => {
    const dateNow = new Date();
    const array: DropdownArray = uniq(
      getMonths(new Date(), 5)
        .reverse()
        .map(({ month, date }: { month: string; date: Date }) => ({
          text:
            dateNow.getMonth() === date.getMonth()
              ? `${t('report.current')} (${capitalize(month)})`
              : capitalize(month),
          onClick: () => onSelectMonth(startOfMonth(date)),
        })),
    );
    return array;
  };
  const usage = data?.usageData?.periodicData;

  if (loading)
    <Container>
      <Confirmation title={t('report.loadingHeading')} icon={<Icon icon="receipt" />} />
    </Container>;

  if (!usage) {
    return (
      <Container>
        <Confirmation
          title={t('report.notFoundHeading')}
          description={t('report.notFoundDescription', {
            serviceId,
            month: getMonth(dateTime()),
          })}
          icon={<Icon icon="receipt" />}
        />
      </Container>
    );
  }

  if (error)
    <Container>
      <Confirmation
        title={t('report.errorHeading')}
        description={t('report.errorDescription')}
        icon={<Icon icon="receipt" />}
      />
    </Container>;

  return (
    <ReportList
      title={t('report.title')}
      DatePicker={<DropdownMenu items={months()} buttonText={buttonText} color={color} />}
    >
      <>
        {usage.map((item) => {
          return (
            <>
              {item?.from && (
                <Box>
                  <Box
                    display="flex"
                    flexDirection="row"
                    alignItems="center"
                    marginTop={3}
                    marginBottom={3}
                  >
                    <Text variant="eyebrowSmall" color={color} key={item?.from}>
                      {formatDate(item?.from, 'd. MMMM - EEEE')}
                    </Text>
                    <IconButton
                      color="black100"
                      icon={hiddenDays.includes(item?.from) ? 'arrowDown' : 'arrowRight'}
                      hiddenButtonText="Show More"
                      onClick={() => onArrowClick(item?.from)}
                    />
                  </Box>
                  {hiddenDays.includes(item?.from) && (
                    <Box>
                      <Grid
                        gridTemplate={{ sm: 8, md: 12 }}
                        rowGap={{ sm: 2, lg: 3 }}
                        columnGap={{ sm: 1, md: 2 }}
                      >
                        <GridItem gridColumn={{ sm: 'span2', md: 'span3' }}>
                          <Text variant="eyebrowSmall" color="grey500">
                            {t('report.time')}
                          </Text>
                        </GridItem>
                        <GridItem gridColumn={{ sm: 'span2', md: 'span3' }}>
                          <Text variant="eyebrowSmall" color="grey500">
                            {t('report.type')}
                          </Text>
                        </GridItem>
                        <GridItem gridColumn={{ sm: 'span2', md: 'span3' }}>
                          <Text variant="eyebrowSmall" color="grey500">
                            {t('report.quantity')}
                          </Text>
                        </GridItem>
                        <GridItem gridColumn={{ sm: 'span2', md: 'span3' }}>
                          <Text variant="eyebrowSmall" color="grey500">
                            {t('report.amount')}
                          </Text>
                        </GridItem>
                        <GridItem gridColumn={{ sm: 'span8', md: 'span12' }}>
                          <Box
                            marginTop={-1}
                            borderBottomStyle="solid"
                            borderWidth="2px"
                            borderColor="grey300"
                          ></Box>
                        </GridItem>
                      </Grid>
                      {item?.usageDetails?.map((detail) => {
                        return (
                          <Box key={detail?.startTime} marginTop={2} marginBottom={2}>
                            <Grid
                              gridTemplate={{ sm: 8, md: 12 }}
                              rowGap={{ sm: 2, lg: 3 }}
                              columnGap={{ sm: 1, md: 2 }}
                            >
                              <GridItem gridColumn={{ sm: 'span2', md: 'span3' }}>
                                {detail?.startTime && detail?.endTime && (
                                  <Text variant="pSmallRegular">
                                    {`${formatDate(detail?.startTime, 'HH:mm')} - ${formatDate(
                                      detail?.endTime,
                                      'HH:mm',
                                    )}`}
                                  </Text>
                                )}
                              </GridItem>
                              <GridItem gridColumn={{ sm: 'span2', md: 'span3' }}>
                                {detail?.type && <Text variant="pSmallRegular">{detail.type}</Text>}
                              </GridItem>
                              <GridItem gridColumn={{ sm: 'span2', md: 'span3' }}>
                                {detail?.displayUsage && detail?.displayUnit && (
                                  <Text variant="pSmallRegular">{`${detail.displayUsage} ${detail.displayUnit}`}</Text>
                                )}
                              </GridItem>
                              <GridItem gridColumn={{ sm: 'span2', md: 'span3' }}>
                                <Text variant="pSmallRegular">
                                  {formatPrice(detail?.cost ?? 0)}
                                </Text>
                              </GridItem>
                            </Grid>
                          </Box>
                        );
                      })}
                      <Box borderBottomStyle="solid" borderWidth="2px" borderColor="grey300"></Box>
                      {item?.totalUsage?.map((total) => {
                        return (
                          <Box
                            display="flex"
                            flexDirection="row"
                            justifyContent="space-between"
                            alignItems="center"
                            key={total?.usage}
                            marginTop={2}
                          >
                            <Box>
                              <Text variant="pSmallBold">{t('report.total')}</Text>
                            </Box>
                            <Box>
                              {total?.displayUsage && total?.displayUnit && (
                                <Text variant="pSmallBold">{`${total.displayUsage} ${total.displayUnit}`}</Text>
                              )}
                            </Box>
                            <Box>
                              <Text variant="pSmallBold">{formatPrice(total?.cost ?? 0)}</Text>
                            </Box>
                          </Box>
                        );
                      })}
                    </Box>
                  )}
                </Box>
              )}
            </>
          );
        })}
      </>
    </ReportList>
  );
};
export default Report;